<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>环保局测试系统</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/style.css" />
	</head>

	<script src="./js/echarts.js"></script>
	<script src="./js/vue.js"></script>
	<!-- <script src="https://unpkg.com/axios/dist/axios.js"></script> -->
	<script src="js/jquery-3.2.1.min.js"></script>
	<body>
		<div id="app" style="background-color: lightyellow">
			<h2>点击空白处返回上一级地图</h2>
			<div id="echarts_china" style="width:100%;height: 650px;"></div>
		</div>
	</body>

	<style>
		h2 {
			text-align: center;
			color: skyblue;
		}
	</style>

	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				//datalist中存储下一级地图的name和adcode
				datalist: [], //[{"adcode":"", "name":""},{"adcode":"", "name":""}]
				clickAdcode: 100000,
				preAdcode: 100000,
				aliUrl: 'https://geo.datav.aliyun.com/areas_v2/bound/geojson?code=',
				myChart: "",
				tailStr: "_full"
			},
			mounted: function() {
				this.init();
				this.clickNOTblank();
				this.clickBlank();
			},
			methods: {
				init: function() {
					myChart = echarts.init(document.getElementById('echarts_china'));
					this.initData();
				},
				/**
				 * 网络请求地图json数据
				 * 注册echarts，设置option
				 * */
				initData: function() {
					var that = this;
					var data;
					that.tailStr = "_full";
					//series-map. map | 地图数据 | JSON 引入示例
					console.log("URL=",that.preAdcode + that.tailStr)
					$.get(that.aliUrl + that.preAdcode + that.tailStr, function(
						chinaJson) {
						console.log("geo",chinaJson)
						echarts.registerMap('cc', chinaJson);
						var option = {
							geo:{
								type: 'map',
								map: 'cc',
								show:true,
								label: {
									normal: {
										show: true //省份名称  
									}
								},
							},
							series: [{
								type: "scatter",
								coordinateSystem: "geo",
								data: [
									{
											name: "北京",
											value: [116.46, 39.92]
										},
										{
											name: "上海",
											value: [121.48, 31.22]
										},
										{
											name: "深圳",
											value: [114.07, 22.62]
										},
										{
											name: "广州",
											value: [113.23, 23.16]
										}
								]
							}],
							tooltip: {
								trigger: "item"
							}
						};
						myChart.setOption(option);
						//获取当前显示页面的下一级name和adcode
						data = chinaJson.features;
						that.datalist.length = 0;
						for (var i = 0; i < data.length; i++) {
							var temp = {
								"adcode": "",
								"name": ""
							};
							temp.adcode = data[i].properties.adcode;
							temp.name = data[i].properties.name;
							that.datalist.push(temp); //第一次显示中国地图的时候，获取所有省份数据
							// console.log(that.datalist[i].name)
						}
					});
				},
				/**
				 * 点击了地图非空白处
				 * */
				clickNOTblank: function() {
					var that = this;
					myChart.on('click', function(params) {
						//获取点击地区的adcode
						var adcode;
						for (var i = 0; i < that.datalist.length; i++) {
							if (that.datalist[i].name == params.name) {
								adcode = that.datalist[i].adcode;
							}
						}
						that.clickAdcode = adcode;
						console.log("当前点击的是" + params.name + ", code：" + that.clickAdcode);

						//展示当前地区map
						$.get(that.aliUrl + that.clickAdcode + that.tailStr, function(clickJson) {
							echarts.registerMap('clickMap', clickJson);
							var option = {
								geo:{
									type: 'map',
									map: 'clickMap',
									label: {
										normal: {
											show: true //省份名称  
										}
									},
								},
								series: [{
									type: "scatter",
									coordinateSystem: "geo",
									data:[
										{
												name: "开封",
												value: [114.35,34.79]
											},
											{
												name: "郑州",
												value: [113.65,34.76]
											},
											{
												name: "平顶山",
												value: [113.29,33.75]
											}
									]
								}]
							};
							myChart.setOption(option);
							//获取当前区域的下级区域code
							data = clickJson.features;
							that.datalist.length = 0;
							for (var i = 0; i < data.length; i++) {
								var temp = {
									"adcode": "",
									"name": ""
								};
								temp.adcode = data[i].properties.adcode;
								temp.name = data[i].properties.name;
								that.datalist.push(temp);
								// console.log(that.datalist[i].name);
							}
						}).fail(function() {
							that.tailStr = '';
							$.get(that.aliUrl + that.clickAdcode + that.tailStr, function(
								clickJson) {
								echarts.registerMap('clickMap', clickJson);
								var option = {
									series: [{
										type: 'map',
										map: 'clickMap',
										label: {
										  normal: {
										    show: true //省份名称
										  }
										}
									}]
								};
								myChart.setOption(option);
							})
							console.log("别点了，到底啦！");
						});

						//确定preAdcode
						that.preAdcode = that.clickAdcode;
					});
				},
				/**
				 * 点击了地图空白处
				 * */
				clickBlank: function() {
					var that = this;
					myChart.getZr().on('click', function(event) {
						if (!event.target) {
							// preAdcode 回退
						if (that.preAdcode % 10000 == 0) {
							that.preAdcode = 100000; //回退到china
							 that.initData();
							console.log('点击了空白处，当前显示地区的adcode:'+ that.preAdcode);
						} else if (that.preAdcode % 100 == 0) {
							that.preAdcode = that.preAdcode - that.preAdcode%10000; //回退到province
							 that.initData();
						  console.log('点击了空白处，当前显示地区的adcode:'+ that.preAdcode);
						}else{
						  that.preAdcode = that.preAdcode - that.preAdcode%100; //回退到city
						  that.initData();
						  console.log('点击了空白处，当前显示地区的adcode:'+ that.preAdcode);
						}
						}
					});
				}
			}
		})
	</script>

</html>
